﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <style>
    html,body { height:100%; width:100%; margin:0; padding:0;align:left;valign:left;}
  </style>    
</head>
<body bgcolor="#000000">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:100%;background-color:#000000;"></div>
    <script src="./js/echarts.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart ;        
        // 指定图表的配置项和数据
       // option = ;
       // myChart.setOption(option, true);
        function createYbChart(a,b) {           
            option = {
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                toolbox: {
                    feature: {
                        // restore: {},
                        //  saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '业务指标',
                        type: 'gauge',
                        center: ['50%', '50%'],
                        // startAngle: 90,
                        // endAngle: -140,

                        min: 0,
                        max: 100,
                        axisLine: {            // 坐标轴线
                            show: true,        // 默认显示，属性show控制显示与否
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[0.2, '#ff4500'], [0.5, 'orange'], [0.8, 'skyblue'], [1, 'lightgreen']],
                                width: 30
                            }
                        },
                        pointer: {
                            length: '80%',
                            width: 8,
                            color: 'auto'
                        },
                        title: {
                            show: true,
                            offsetCenter: ['-0%', '105%'],       // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: '#fff',
                                fontSize: 38
                            }
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            show: true,
                            formatter: function (v) {
                                switch (v + '') {
                                    case '0': return '0';
                                    case '10': return '10';
                                    case '20': return '20';
                                    case '30': return '30';
                                    case '40': return '40';
                                    case '50': return '50';
                                    case '60': return '60';
                                    case '70': return '70';
                                    case '80': return '80';
                                    case '90': return '90';
                                    case '100': return '100';
                                    default: return '';
                                }
                            },
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: '#fff',
                                fontSize: 20
                            }
                        },
                        detail: {
                            show: true,
                            backgroundColor: 'rgba(0,0,0,0)',
                            borderWidth: 0,
                            borderColor: '#ccc',
                            width: 100,
                            height: 40,
                            offsetCenter: ['-0%', '75%'],       // x, y，单位px
                            formatter: '{value}%',
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: 'auto',
                                fontSize: 38
                            }
                        },
                        //  detail: { formatter: '{value}%' },
                        data: [{ value: a, name: b }]
                    }
                ]
            };
            }
            function createChart(a,b,c){   
         	   myChart = echarts.init(document.getElementById('main'));
                 createYbChart(a,b);                                
                 //使用指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.onresize = myChart.resize;
         }              
        
    </script>
</body>
</html>